
import { generateTimeArray } from "@/utils/common";
const xAxisData = generateTimeArray();
const formatXAxisLabel = (value) => {
  let ret = ""; // 拼接加\n返回的类目项
  const max = 10; // 每行显示的文字字数
  const val = value.length; // X轴内容的文字字数
  const rowN = Math.ceil(val / max); // 需要换的行数
  if (rowN > 1) {
    // 判断 如果字数大于10就换行
    for (let i = 0; i < rowN; i++) {
      const start = i * max; // 开始截取的位置
      const end = start + max; // 结束截取的位置
      ret += value.substring(start, end) + "\n"; // 每次截取并添加换行
    }
    return ret;
  } else {
    return value; // 如果未超过限制，直接返回
  }
};
// 定义通用样式
const lineStyle = (color) => ({
  itemStyle: {
    color,
    lineStyle: { color },
  },
  smooth: true,
  symbol: "circle",
  emphasis: { focus: "series" },
});

// 定义区域样式
const generateAreaStyle = (colorStops) => ({
  areaStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops,
      global: false,
    },
  },
});

export const chartOption = {
  color: [
    '#9dffc7',
    '#fca55f',
    '#f7adcb',
    '#78d3f8',
    '#fecd3e',
    '#7a8aaa',
    '#746deb',
    '#61ddaa',
    '#f69648',
    '#C96771',
    '#7EB889',
    '#4183fb'
  ],
  title: {
    text: "",
    x: "center",
    y: "top",
    textStyle: { fontSize: 16, color: "#fff" },
    top: "10",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { animation: false },
  },
  legend: {
    textStyle: { color: "#fff" },
    top: "40",
    itemStyle: {
      borderWidth: 0
    },
    icon: 'rect'
  },
  axisPointer: { link: [{ xAxisIndex: "all" }] },
  grid: [
    { top: "80", right: "3%", bottom: "10%", left: 60, height: "40%" },
    { top: "400", right: "3%", bottom: "0", left: 60, height: "27%" },
  ],
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      axisLine: { onZero: true },
      axisLabel: { formatter: formatXAxisLabel },
      data: [],

    },
    {
      gridIndex: 1,
      type: "category",
      boundaryGap: false,
      axisLine: { onZero: true },
      axisLabel: { formatter: formatXAxisLabel },
      data: [],
    },
  ],
  yAxis: [{ type: "value" }, { gridIndex: 1, type: "value" }],
  dataZoom: [
    {
      type: "inside",
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
    },
    {
      show: true,
      type: "slider",
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
      height: 20,
      bottom: 10,
      borderColor: "#ccc",
      fillerColor: "rgba(167,183,204,0.4)",
      handleColor: "#fff",
      handleSize: "100%",
    },
  ],
  series: [
    {
      name: "总功率",
      data: [],
      type: "line",
      ...lineStyle("#76c0de"),
    },
    {
      name: "储能功率",
      data: [],
      type: "line",
      ...lineStyle("#c93a3a"),
      markLine: {
        data: [{
          name: "最大需量",
          xAxis: "",
          yAxis: 1000,
          symbol: "circle",
        },],
        label: {
          show: true,
          position: "middle",
          formatter: "{b}({c})",
          color: "#fff",
        },
        lineStyle: { color: "#903838", width: 1 },
      },
      ...generateAreaStyle([
        { offset: 0, color: "rgba(201, 58, 58, 1)" },
        { offset: 1, color: "rgba(201, 58, 58, 1)" },
      ]),
    },
    {
      name: '用户功率',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'circle',
      itemStyle: {
        color: '#f9ca59', //改变折线点的颜色
        lineStyle: {
          color: '#f9ca59' //改变折线颜色
        }
      },
      emphasis: {
        focus: 'series'
      },
    },
    {
      name: "soc",
      type: "line",
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 7,
      symbol: (value, params) =>
        (params.name.split(":")[1] === "00" &&
          params.name.split(":")[2] === "00") ||
          params.data?.isDouble
          ? "circle"
          : "none",
      data: [],
      ...lineStyle("rgba(84,112,198, 1)"),
      ...generateAreaStyle([
        { offset: 0, color: "rgba(84,112,198, 1)" },
        { offset: 1, color: "rgba(84,112,198, 0)" },
      ]),
    },

  ],
};

export const userChartOption = {
  userChartOption: true, // 标识用户功率曲线
  name: '用户功率2',
  data: [],
  smooth: true,
  type: 'line',
  symbol: 'circle',
  // itemStyle: {
  //   color: '#b8ffd6', //改变折线点的颜色
  //   lineStyle: {
  //     color: '#b8ffd6', //改变折线颜色
  //   },
  // },
  emphasis: {
    focus: 'series'
  },
}
export const pointChartOption =
{
  title: {
    text: '',
    x: 'center',
    y: 'top',
    textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
      fontSize: 16,
      color: '#fff'
    },
    top: "5%",
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false
    }
  },
  legend: {
    textStyle: {
      color: '#fff'
    },
    top: '13%',

  },

  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },

  grid: [
    {
      top: '20%',
      right: '3%',
      bottom: 0,
      left: 60,
      height: '63%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: [],
      axisLabel: {
        formatter: (value) =>  //X轴的内容
        {

          let ret = ""; //拼接加\n返回的类目项
          let max = 10;  //每行显示的文字字数
          let val = value.length;  //X轴内容的文字字数
          let rowN = Math.ceil(val / max);  //需要换的行数
          if (rowN > 1)  //判断 如果字数大于2就换行
          {
            for (let i = 0; i < rowN; i++) {
              let temp = "";  //每次截取的字符串
              let start = i * max;  //开始截取的位置
              let end = start + max;  //结束截取的位置
              temp = value.substring(start, end) + "\n";
              ret += temp;  //最终的字符串
            }
            return ret;
          }
          else { return value }
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
    }
  ],
  dataZoom: [
    {
      type: "inside",
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,

    },
    {
      show: true,
      type: "slider",
      xAxisIndex: [0, 1],
      start: 0,
      end: 100,
      height: 20,
      bottom: '4%',
      borderColor: "#ccc",
      fillerColor: "rgba(167,183,204,0.4)",
      handleColor: "#fff",
      handleSize: "100%",
    },
  ],
  series: [
    {
      name: '计量点总功率',
      data: [],
      smooth: true,
      type: 'line',
      symbol: 'circle',
      itemStyle: {
        color: '#6df117', //改变折线点的颜色
        lineStyle: {
          color: '#6df117' //改变折线颜色
        }
      },

      emphasis: {
        focus: 'series'
      },
      markLine: {
        data: [
          {
            name: "最大需量",
            xAxis: "",
            yAxis: null,
            symbol: "circle",
          },
        ],
        label: {
          show: true,
          position: "middle",
          // formatter: `{b}({c})`,
          formatter: (value) => {
            // totalDemand 为 0.0，代表未设置总需量
            if (value.data.value === '0.0') {
              return `未设置总需量`
            }
            return `${value.name}: (${value.data.value})`
          },
          color: '#fff',
        },
        lineStyle: {
          color: "#ffaaaa",
          width: 1,
        },
      },
    },
    {
      name: '计量点储能功率',
      data: [],
      type: 'line',
      symbol: 'circle',
      smooth: true,
      itemStyle: {
        color: '#c93a3a', //改变折线点的颜色
        lineStyle: {
          color: '#c93a3a' //改变折线颜色
        }
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#c93a3a' // 0% 处的颜色
          }, {
            offset: 1, color: '#c93a3a' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      },
      emphasis: {
        focus: 'series'
      },
    },
  ]
}
// 支路关口表
export const brandChartOption = {
  name: '支路',
  data: [],
  smooth: true,
  type: 'line',
  symbol: 'circle',
  emphasis: {
    focus: 'series'
  },
}